<style>
    .layui-form-label {
        width: 50px !important;
    }

    .layui-input-block {
        margin-left: 90px;
    }

    .hover {
        cursor: pointer;
    }
</style>
<div class="rc-pagepadding ">
    <div class=" rc-pannel rc-pagepadding">
        <div class="rc-pannel-body layui-form ">
            <div class="layui-form-item">
                <label class="layui-form-label">字典名</label>
                <div class="layui-input-block">
                    <input type="input" name="title" id="title" lay-verify="required" class="layui-input">
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">字典值</label>
                <div class="layui-input-block">

                    <table class="layui-table">
                        <colgroup>
                            <col style="width: 50px;">
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th><i class="iconfont hover" id="add">&#xe60e;</i> </th>
                                <th>显示名</th>
                                <th>实际值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td><input type="text" class="layui-input" name="values[0][displayname]" /></td>
                                <td><input type="text" class="layui-input" name="values[0][realvalue]" /></td>

                            </tr>
                        </tbody>

                    </table>

                </div>

            </div>

            <div class="layui-form-item rc-margin-bottom0">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm">重置</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(function() {
            var form = layui.form;
            var i = 0;
            $('#add').click(function() {
                i = i + 1;
                $('tbody').append('<tr>\
                    <td><i class="iconfont hover delete">&#xe786;</i></td>\
                    <td><input type="text" class="layui-input" name="values[' + i + '][displayname]" /></td>\
                    <td><input type="text" class="layui-input" name="values[' + i + '][realvalue]" /></td>\
                </tr>');
            });

            $('body').on('click', '.delete', function() {
                $(this).parent().parent().remove();
            });



            form.on('submit(submit)', function(data) {
                $.ajax({
                    url: '/admin/cnf/Datadict/add', //请求路径
                    type: "POST", //请求方式
                    data: data.field, // 默认写法
                    success: function(data) {
                        if (data.code == 0) {
                            toastr_success('添加成功', function() {
                                window.parent.location.reload();
                            });
                        } else {
                            toastr_error(data.message);
                        }
                    },
                    error: function() {

                    },

                });
            });

        });
    </script>